<template>
  <div class="el-login">
    <div class="login">
      <div class="header">
        <h2>后台登录</h2>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密&nbsp;&nbsp;&nbsp;码：" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { User, Lock } from '@element-plus/icons-vue'
import { mapMutations } from 'vuex'
import { upUser } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  components: {
    User,
    Lock
  },
  data() {
    return {
      ruleFormRef: null,
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState(['currentPath'])
  },
  mounted() {
    this.ruleFormRef = this.$refs.ruleFormRef
  },
  methods: {
    ...mapMutations(['upfdataUserInfo']),
    submitForm(formEl) {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          console.log('submit!')
          upUser({
            adminname: this.ruleForm.username,
            password: this.ruleForm.password
          }).then((res) => {
            if (res.message === '密码错误') {
              this.ruleForm.password = ''
              return
            }
            if (res.message === '未注册') {
              return
            }
            this.upfdataUserInfo(res.data)
            // console.log(res.data)
            this.$router.push(this.currentPath || '/')
          })
        } else {
          console.log('登录失败')
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-login {
  width: 100%;
  height: 100%;
  background: rgb(3, 178, 12);

  .demo-ruleForm {
    width: 320px;
    height: 160px;
    padding: 20px;
    border: 1px solid #fff;
    background: pink;
    border-radius: 15px;
  }
  .el-button {
    width: 100%;
    margin-top: 20px;
  }
  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-150px, -160px);
  }
}
.header {
  text-align: center;
  color: #fff;
}
</style>
